<script>
export default {
  name: 'ContactPage',
  data () {
    return {
      contact: {
        location: '湖北省武汉市江夏区阳光大道25号',
        postalCode: '430000',
        phone: '（86）186-7291-5327',
        email: '408037309@qq.com',
        weChatAccount: 'chenyixuan_1208'
      }
    }
  },
  mounted () {
    const vue = this
    // eslint-disable-next-line
    const map = new BMapGL.Map("map", {
      enableRotate: false,
      enableTilt: false
    }) // 创建Map实例
    // eslint-disable-next-line
    const geocoder = new BMapGL.Geocoder();

    geocoder.getPoint('湖北省武汉市江夏区阳光大道25号', function (res) {
      if (res) {
        vue.x = res.lng
        vue.y = res.lat
        // eslint-disable-next-line
        let mk = new BMapGL.Marker(res);
        map.addOverlay(mk)
        // eslint-disable-next-line

        // eslint-disable-next-line
        map.panTo(res);
      } else {
        vue.$message.error('失败未知错误')
      }
    })

    // eslint-disable-next-line
    map.centerAndZoom(new BMapGL.Point(this.x, this.y), 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
  }
}
</script>

<template>
  <div class="contact-page">
    <div class="w">
      <div class="card-titile">武汉市金纺大教育科技发展有限公司</div>
      <div class="cards">
        <div class="card">
          <div class="icon">
            <img :src="$url + '/icon/location.png'" alt="" />
          </div>
          <div class="text">
            地址：
            <span>{{ contact.location }}</span>
          </div>
        </div>
        <div class="card">
          <div class="icon">
            <img :src="$url + '/icon/postalCode.png'" alt="" />
          </div>
          <div class="text">
            邮编：
            <span>{{ contact.postalCode }}</span>
          </div>
        </div>
      </div>
      <div class="cards">
        <div class="card email">
          <div class="icon">
            <img :src="$url + '/icon/phone.png'" alt="" />
          </div>
          <div class="text">
            电话：
            <span>{{ contact.phone }}</span>
          </div>
        </div>
        <div class="card location">
          <div class="icon">
            <img :src="$url + '/icon/email.png'" alt="" />
          </div>
          <div class="text">
            应聘求职：
            <span>{{ contact.email }}</span>
          </div>
        </div>
      </div>
      <div class="cards weChatAccount">
        <div class="card">
          <div class="icon">
            <img :src="$url + '/icon/weixin.png'" alt="" />
          </div>
          <div class="text">
            微信账号：
            <span>{{ contact.weChatAccount }}</span>
          </div>
        </div>
      </div>

      <div class="card en">
        <div class="text">
          Telephone :<span>{{ contact.phone }}</span>
        </div>
        <div class="text">
          Mail box :<span>{{ contact.email }}</span>
        </div>
        <div class="text">
          Contact address :<span>{{ contact.location }}</span>
        </div>
        <div class="text">
          weChat account :<span>{{ contact.weChatAccount }}</span>
        </div>
      </div>
      <div class="map" id="map"></div>

      <div class="codes">
        <div class="code">
          <img src="@/assets/q_r_code.png" alt="" />
        </div>
        <div class="code">
          <img src="@/assets/q_r_code.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.contact-page {
  margin: 80px 0;
  .w {
    width: 1200px;
    box-sizing: border-box;
    padding: 40px 50px 80px 50px;
    margin: 0 auto;
    background-color: #fff;
    .card-titile {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90px;
      background-color: #414099;
      border-bottom: 4px solid #6f6edf;
      border-radius: 5px 5px 0 0;
      color: #fff;
      font-size: 24px;
      margin-bottom: 40px;
    }
    .card {
      width: 500px;
      height: 120px;
      padding: 15px 20px 0 20px;
      text-align: center;
      box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.1);
      .icon {
        width: 100%;
        height: 52px;
        font-size: 30px;
        margin-bottom: 8px;
      }
      .text {
        font-size: 16px;
        line-height: 22px;
      }
    }

    .cards {
      display: flex;
      justify-content: space-between;
    }

    .cards.weChatAccount {
        justify-content: center;
    }

    .cards,
    .en {
      margin-bottom: 38px;
    }

    .en {
      width: 100%;
      box-sizing: border-box;
      &.card {
        height: auto;
        padding: 40px 38px;
        .text {
          text-align: left;
          margin-bottom: 10px;
        }
      }
    }

    .map {
      height: 314px;
    }

    .codes {
        margin-top: 80px;
        display: flex;
        justify-content: space-between;
    }
    .codes .code {
        width: 40%;
    }

    .codes .code img {
        display: block;
        width: 100%;
    }
  }
}
</style>
